/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div>
    <!-- <router-link :to="{path:'/taskDetail',query:{title:item.title, id: item.content[0].value, appname: appname}}" > -->
    <router-link :to="{path: item.detailBtn ? item.detailBtn.url : '/details', query: {appname: appname}}" >
      <li class="list">
        <p class="title"><span class="left">{{item.title}}</span></p>
        <div class="infos" >
          <div class="info" v-for="j in item.content" :key="j.id">
            <div class="label">{{j.label}}</div>
            <div class="value">{{j.value}}</div>
          </div>
        </div>
        <div class="done"  v-if="item.flowstatus" >
          <img  v-bind:src="require(`../../../static/img/type/${item.flowstatus}.jpg`)" alt="">
          <!-- <p>2018-03-28 12:12:00</p> -->
        </div>
      </li>
    </router-link>
  </div>
</template>

<script>
import {typesByStatus} from '../../util/contact.js';

export default {
  props: {
    index: Number,
    item: Object,
    appname: String
  },
  data() {
    return {};
  },
  mounted() {},
  components: {}
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";
.list:first-child {
  margin-top: 6px;
}
.list {
  background: #fff;
  margin: 0 6px 6px;
  // box-shadow: 0px 5px 5px -3px @primary;
  border: 1px solid @grayLine;
  border-radius: 5px;
  padding: 5px;
  position: relative;
  overflow: hidden;
  .left,
  .right {
    display: inline-block;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
    color: @primary;
    padding-right: 8px;
  }
  .boxShadow();
  .title {
    color: @font-regular;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
  }
  .infos {
    font-size: 13px;
    .info {
      display: flex;
      height: 25px;
      line-height: 25px;
      color: @font-secondary;
      .label {
        display: flex;
      }
      .label:after {
        content: ":";
        margin-right: 4px;
        position: relative;
        top: -1px;
      }
      .value {
        display: flex;
        color: @font-regular;
      }
    }
  }
  .done {
    position: absolute;
    top: 9vw;
    right: 2vw;
    width: 120px;
    height: 100px;
    text-align: center;
    img {
      width: 80px;
      height: 80px;
    }
    p {
      font-size: 12px;
      color: @border-base;
      text-align: center;
      margin-top: 5px;
    }
  }
  .undone {
    .types-bg();
    width: 130px;
    height: 130px;
    color: #fff;
    /* Rotate div */
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -o-transform: rotate(45deg); /* Opera */

    position: absolute;
    right: -65px;
    top: -65px;
    font-size: 14px;
    text-align: center;
    .text-one {
      position: absolute;
      bottom: 23px;
      width: 100%;
      text-align: center;
    }
    .text-two {
      position: absolute;
      bottom: 3px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
